<template>
  <el-dialog
    title="单据明细"
    :close-on-click-modal="false"
    :visible.sync="visible"
    append-to-body
  >
    <el-form
      :model="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item label="往来单位" prop="organName">
        <el-input v-model="dataForm.organName"></el-input>
      </el-form-item>
      <el-form-item label="单据日期" prop="billTime">
        <el-input v-model="dataForm.billTime"></el-input>
      </el-form-item>
      <el-form-item label="单据编号" prop="billNo">
        <el-input v-model="dataForm.billNo"></el-input>
      </el-form-item>
      <el-form-item label="付款账户" prop="accountName">
        <el-input v-model="dataForm.accountName"></el-input>
      </el-form-item>
      <el-form-item label="付款金额" prop="changeAmount">
        <el-input v-model="dataForm.changeAmount"></el-input>
      </el-form-item>
      <el-form-item label="单据备注" prop="remark">
        <el-input v-model="dataForm.remark"></el-input>
      </el-form-item>
    </el-form>
    <el-form
      :model="dataList"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item label="仓库名称" prop="DepotName">
        <el-input v-model="dataList.DepotName"></el-input>
      </el-form-item>
      <el-form-item label="名称(型号)(扩展信息)(单位)" prop="MaterialName">
        <el-input v-model="dataList.MaterialName"></el-input>
      </el-form-item>
      <el-form-item label="单位" prop="Unit">
        <el-input v-model="dataList.Unit"></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="OperNumber">
        <el-input v-model="dataList.OperNumber"></el-input>
      </el-form-item>
      <el-form-item label="单价" prop="UnitPrice">
        <el-input v-model="dataList.UnitPrice"></el-input>
      </el-form-item>
      <el-form-item label="含税单价" prop="TaxUnitPrice">
        <el-input v-model="dataList.TaxUnitPrice"></el-input>
      </el-form-item>
      <el-form-item label="金额" prop="AllPrice">
        <el-input v-model="dataList.AllPrice"></el-input>
      </el-form-item>
      <el-form-item label="税率" prop="TaxRate">
        <el-input v-model="dataList.TaxRate"></el-input>
      </el-form-item>
      <el-form-item label="税额" prop="TaxMoney">
        <el-input v-model="dataList.TaxMoney"></el-input>
      </el-form-item>
      <el-form-item label="价税合计" prop="TaxLastMoney">
        <el-input v-model="dataList.TaxLastMoney"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="Remark">
        <el-input v-model="dataList.Remark"></el-input>
      </el-form-item> 
    </el-form>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate"></add-or-update>
  </el-dialog>
</template>

<script>
import AddOrUpdate from "./account-add-or-update";
import { isEmail, isMobile } from "@/utils/validate";
export default {
  data() {
    return {
      parentValue: [],
      value1: "",
      value2: "",
      dataFormLoading: false,
      value: "",
      visible: false,
      roleList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {
        organName: "",
        operTimeStr: "",
        defaultNumber: "",
        payType: "",
        totalPrice: "",
        changeAmount: "",
        discountLastMoney: "",
        accountName: "",
      },
      dataList: {
        DepotName: "",
        MaterialName: "",
        Unit: "",
        OperNumber: "",
        UnitPrice: "",
        TaxUnitPrice: "",
        AllPrice: "",
        TaxRate: "",
        TaxMoney: "",
        TaxLastMoney: "",
        Remark: "",
      },
      addOrUpdateVisible: false,
      id:null,
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    init(id) {
      console.log(id);
      this.visible = true;
      this.dataForm.id = id || 0;
      if (this.dataForm.id) {
        this.$http({
          url: this.$http.adornUrl("/accountHead/getDetailByNumber"),
          method: "get",
          params: this.$http.adornParams(
            {
              billNo:this.dataForm.id
            },
            false
          ),
        }).then(({ data }) => {
          console.log(data.data);
          this.id=data.data.id
          this.dataForm = data.data;
          this.totalPage = data.data.totalCount;
          if(this.id==null){
          // console.log(this.id)
          return
        }
        this.$http({
          url: this.$http.adornUrl(`/depotItem/getDetailList?headerId=${this.id}&mpList=undefined%2Cundefined%2Cundefined`),
          method: "get",
          params: this.$http.adornParams(
            {
              number:id
            },
            false
          ),
          }).then(({ data }) => {
          console.log(data.data.rows);
          this.dataList=data.data.rows
        })
        })
        

      }
    },
  },
};
</script>
<style scoped>
.form .el-input__inner {
  width: 220px;
}
.form .el-form-item {
  display: inline-block;
  width: 33%;
}
element.style {
  width: 900px;
}
.el-form-item__content {
  margin-left: 0px;
}
.form1 {
  margin-left: -100px !important;
}
</style>


